<template>
    <div class="rights">
       <el-row>
            <el-col :span="24">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <div class="table_container">
                <el-table
                :data="rolelist"
                :border="border"
                style="width: 100%"  v-loading="loading">
                <el-table-column
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                  label="权限名称"
                  prop="authName"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="路径"
                  prop="path"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="层级">
                    <template slot-scope="scope">
                        <span>{{scope.row.level|levelFilter}}</span>
                    </template>
                </el-table-column>
                
                </el-table>
            </div>
    </div>
</template>

<script>
import {getRightsList} from '@/api/api.js'
export default {
    data(){
        return{
            loading:true,
            border:true,
            rolelist:[]
        }
    },
    created() {
        this.initRoleList()
    },
    methods: {
        initRoleList(){
            this.loading=true
            getRightsList({type:'list'}).then(res=>{
                console.log(res)
                if(res.meta.status===200){
                    this.rolelist=res.data;
                    this.loading=false;
                }
            })
        }
    },
    filters: {
        levelFilter(level){
            if(level==='0') {
                return '一层'
            }else if(level==="1") {
                return '二层'
            }else {
                return '三层'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .rights{
        .table_container {
            padding: 15px 15px 15px 0;
            box-sizing:border-box;
            border:1px solid #EBEEF5;
        }
    }
</style>